<template>
	<a-modal :width="1350" :visible="visible" title="视频贴纸" :mask-closable="false" @ok="handleOk" @cancel="handleClose" centered>
		<div class="main_con">
			<div class="left_phone_view" v-if="visible">
				<DraggableContainer :style="resizableStyle" :referenceLineColor="'white'">
					<!-- 移动容器 -->
					<Vue3DraggableResizable v-show="item.material_url" v-for="(item, index) in stickerGroup"
						:key="'sticker_con'+index" :initW="stickerGroup[index].width" :initH="stickerGroup[index].height"
						v-model:x="stickerGroup[index].elLeft" v-model:y="stickerGroup[index].elTop"
						v-model:w="stickerGroup[index].width" v-model:h="stickerGroup[index].height"
						v-model:active="stickerGroup[index].active" :draggable="true" :resizable="true" :parent="true" :lockAspectRatio="true">
						<div :style="stickersStyle(item, index)">
							<img style="width: 100%; height: 100%;" :src="item.material_url" alt="" />
						</div>
					</Vue3DraggableResizable>
				</DraggableContainer>
			</div>
			<div class="right_set_con">
				<div class="form_con" style="height: 150px;" v-if="stickerGroup.length>0">
					<div class="form_item">
						<div class="form_title">已选择</div>
						<div class="stickers_con">
							<div class="stickers_item" @click="setStickers(stickers_item)" v-for="(
								  stickers_item, stickers_index
								) in stickerGroup" :key="stickers_index">
								<div class="close_icon" @click.stop="deleteStickers(stickers_index)">
									<CloseOutlined />
								</div>
								<div class="stickers_img">
									<img :src="stickers_item.material_url" alt="" />
								</div>
							</div>
						</div>
					</div>
				</div>
				
				<a-tabs v-model:activeKey="activeKey">
					<a-tab-pane v-for="item in tableList" :key="item.tab_id" :tab="item.tab_name">
						<div class="form_con" :style="{height:stickerGroup.length == 0?'575px':'420px'}" v-if="item.tab_id == 'default'">
							<div class="form_item" v-for="(form_item, form_index) in stickersList" :key="form_index">
								<div class="form_title">{{ form_item.name }}</div>
								<div class="stickers_con">
									<div class="stickers_item" v-for="(
										  stickers_item, stickers_index
										) in form_item.materials" :key="stickers_index">
										<div class="add_icon" @click="setStickers(stickers_item)">
											<PlusOutlined />
										</div>
										<div class="stickers_img">
											<img :src="stickers_item.material_url" alt="" />
										</div>
									</div>
								</div>
							</div>
						</div>

						<div class="custom_con" v-if="item.tab_id == 'custom'">
							<div class="custom_upload" @click="handleChooseMaterial">
								<PlusOutlined />
								<div class="upload_txt">素材库添加</div>
							</div>
							
							<div class="stickers_item" v-for="(
								  stickers_item, stickers_index
								) in localImage" :key="stickers_index">
								<div class="delete_icon" @click="deleteLocalImages(stickers_index)">
									<DeleteOutlined />
								</div>
								<div class="add_icon" @click="setStickers(stickers_item)">
									<PlusOutlined />
								</div>
								<div class="stickers_img">
									<img :src="stickers_item.material_url" alt="" />
								</div>
							</div>
						</div>
					</a-tab-pane>
				</a-tabs>
			</div>
		</div>
		<chooseMaterial :isClip="false" :visible="chooseVisible" @close="closeChoose" />
		<stickersSet :visible="setVisible" :stickerObj="currentStickers" @close="closeSet" />
	</a-modal>
</template>

<script>
	import request from "../../../../../../common/utils/request";
	import utils from "../../../../../../common/utils/utils.js";
	import {
		defineComponent,
		ref,
		reactive,
		toRefs,
		watch,
		computed
	} from "vue";
	import {
		PlusOutlined,
		CloseOutlined,
		DeleteOutlined
	} from "@ant-design/icons-vue";
	import {message} from 'ant-design-vue';
	import chooseMaterial from "./chooseMaterial.vue";
	import stickersSet from './stickersSet.vue';
	import {
		DraggableContainer
	} from 'vue3-draggable-resizable';
	import Vue3DraggableResizable from 'vue3-draggable-resizable';
	//default styles
	import 'vue3-draggable-resizable/dist/Vue3DraggableResizable.css';
	import matchData from '../js/match_data.js';
	import store from '@/store';
	export default defineComponent({
		props: {
			visible: {
				type: Boolean,
				default: false,
			},
			stickerObj: {
				type: Object,
				default: () => {return {}}
			}
		},
		components: {
			PlusOutlined,
			CloseOutlined,
			DeleteOutlined,
			chooseMaterial,
			stickersSet,
			DraggableContainer,
			Vue3DraggableResizable
		},
		setup(props, context) {
			const state = reactive({
				setVisible: false,
				currentStickers: {},
				activeKey: "default",
				tableList: [{
						tab_name: "默认",
						tab_id: "default",
					},
					{
						tab_name: "自定义",
						tab_id: "custom",
					},
				],
				stickersList: [],
				chooseVisible: false,
				stickerGroup: [],
				localImage: []
			});
			
			const radioType = computed(()=>store.getters.clipJSON?.aspect_ratio)
			
			const resizableStyle = computed(() => {
				return {
					backgroundImage: `url(https://ui.biaodianyun.com/dy-saas/admin-pc/assets/bg_cover-d353011d.png), url(https://hf.pigcms.com/static/wxapp/images/phone_black_back.png)`,
					backgroundSize: '100% auto',
					backgroundPosition: 'center center',
					backgroundRepeat: 'no-repeat',
					width: '360px',
					height: radioType.value == '1:1'?'360px':radioType.value == '16:9'?'202.5px':'640px'
				}
			})
			
			const generateRandomString = () => {
				let randomString = '';
				const characters = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789';
				const charactersLength = characters.length;
				for (let i = 0; i < 6; i++) {
					randomString += characters.charAt(Math.floor(Math.random() * charactersLength));
				}
				return randomString;
			}

			const handleOk = () => {
				const obj = {
					name: props.stickerObj.name ? props.stickerObj.name : generateRandomString(),
					list: state.stickerGroup
				}
				if (state.stickerGroup.length == 0) {
					message.warn('请选择至少一个图片')
					return
				}
				context.emit("close", obj);
			};

			const handleClose = () => {
				context.emit("close");
			};

			const handleChooseMaterial = () => {
				state.chooseVisible = true;
			};

			const closeChoose = (obj) => {
				state.chooseVisible = false;
				if(obj){
					let imgObj = {
						key: generateRandomString(),
						material_url: obj.material_url
					}
					state.localImage.push(imgObj)
					utils.setStorage('localImage_'+store.getters.userInfo?.uid, JSON.stringify(state.localImage))
				}
			};
			
			const stickersStyle = computed(() => {
				return function(item, index) {
					return {
						'overflow': 'hidden',
						'cursor': 'grab',
						'width': item.width + 'px',
						'height': item.height + 'px',
						'opacity': item.opacity
					}
				}
			})

			const getStickersList = () => {
				request
					.get("/work_ai", "/user/shotstack/material/sticker/list")
					.then((res) => {
						state.stickersList = res.result;
					});
			};
			
			const closeSet = (obj) => {
				state.setVisible = false
				state.currentStickers = {}
				if(obj){
					let index = state.stickerGroup.findIndex(item=>item.name == obj.name)
					if(index == -1){
						state.stickerGroup.push(obj)
					} else {
						state.stickerGroup[index] = obj
					}
				}
				
			}
			
			const setStickers = (item) => {
				state.setVisible = true
				state.currentStickers = item
			}
			
			const deleteStickers = (index) => {
				state.stickerGroup.splice(index, 1)
			}
			
			const deleteLocalImages = (index) => {
				state.localImage.splice(index, 1)
				utils.setStorage('localImage_'+store.getters.userInfo?.uid, JSON.stringify(state.localImage))
			}
			watch(
				() => props.visible,
				(val) => {
					if (val) {
						state.stickerGroup = []
						let localImage = utils.getStorage('localImage_'+store.getters.userInfo?.uid)
						if(localImage){
							state.localImage = JSON.parse(localImage)
						}
						getStickersList();
					}
					if (val && props.stickerObj && props.stickerObj.list?.length > 0) {
						state.stickerGroup = JSON.parse(JSON.stringify(props.stickerObj.list))
					}
				}
			);
			return {
				...toRefs(state),
				handleOk,
				handleClose,
				handleChooseMaterial,
				closeChoose,
				stickersStyle,
				closeSet,
				setStickers,
				deleteStickers,
				deleteLocalImages,
				radioType,
				resizableStyle
			};
		},
	});
</script>

<style lang="less" scoped>
	.main_con {
		display: flex;
		align-items: center;
		justify-content: space-between;

		.left_phone_view {
			width: 360px;
			height: 640px;
			background-color: #000;
			background-image: url("../image/bg_cover.png");
			background-size: 100% 100%;
			background-repeat: no-repeat;
			background-position: center center;
			display: flex;
			align-items: center;
			justify-content: center;
		}

		.right_set_con {
			width: calc(100% - 360px - 15px);
			height: 640px;

			.custom_con {
				display: flex;
				flex-wrap: wrap;
				transform: translateX(-10px) translateY(-10px);
				.stickers_item {
					margin-left: 10px;
					margin-top: 10px;
					display: flex;
					flex-direction: column;
					cursor: pointer;
					position: relative;
				
					.add_icon {
						color: #fff;
						width: 20px;
						height: 20px;
						display: flex;
						align-items: center;
						justify-content: center;
						border-radius: 50px;
						background-color: #2878FF;
						font-size: 14px;
						position: absolute;
						right: 5px;
						bottom: 5px;
					}
					
					.delete_icon{
						color: #fff;
						width: 20px;
						height: 20px;
						display: flex;
						align-items: center;
						justify-content: center;
						border-radius: 50px;
						background-color: #2878FF;
						font-size: 14px;
						position: absolute;
						right: 30px;
						bottom: 5px;
					}
				
					.stickers_img {
						width: 90px;
						height: 90px;
						border-radius: 10px;
						background: aliceblue;
						display: flex;
						align-items: center;
						img {
							max-width: 90px;
							max-height: 90px;
						}
					}
				}
				
				.custom_upload {
					width: 90px;
					height: 90px;
					margin-top: 10px;
					margin-left: 10px;
					border-radius: 10px;
					background: #f9f9f9 !important;
					border: 1px dashed #ddd;
					color: #696969;
					display: flex;
					align-items: center;
					justify-content: center;
					flex-direction: column;
					cursor: pointer;

					.upload_txt {
						margin-top: 5px;
					}
				}
			}

			.form_con {
				height: 575px;
				overflow-y: scroll;

				&::-webkit-scrollbar {
					width: 6px;
				}

				&::-webkit-scrollbar-track {
					width: 5px;
					background-color: transparent;
					-webkit-border-radius: 4px;
					-moz-border-radius: 4px;
					border-radius: 4px;
				}

				&::-webkit-scrollbar-thumb {
					background-color: rgba(193, 193, 193, 0.5);
					background-clip: padding-box;
					min-height: 28px;
					-webkit-border-radius: 4px;
					-moz-border-radius: 4px;
					border-radius: 4px;
				}

				.form_item {
					margin-top: 10px;

					.form_title {
						color: #333;
						font-weight: bold;
						font-size: 14px;
					}

					.stickers_con {
						display: flex;
						flex-wrap: wrap;
						margin-top: 10px;
						transform: translateX(-10px);

						.stickers_item {
							margin-left: 10px;
							margin-top: 10px;
							display: flex;
							flex-direction: column;
							cursor: pointer;
							position: relative;

							.add_icon {
								color: #fff;
								width: 20px;
								height: 20px;
								display: flex;
								align-items: center;
								justify-content: center;
								border-radius: 50px;
								background-color: #2878FF;
								font-size: 14px;
								position: absolute;
								right: 5px;
								bottom: 5px;
							}
							
							.close_icon{
								color: #fff;
								width: 20px;
								height: 20px;
								display: flex;
								align-items: center;
								justify-content: center;
								border-radius: 50px;
								background-color: #333;
								font-size: 14px;
								position: absolute;
								right: -10px;
								top: -10px;
							}

							.stickers_img {
								width: 90px;
								height: 90px;
								border-radius: 10px;
								background: aliceblue;
								display: flex;
								align-items: center;
								justify-content: center;
								img {
									max-width: 90px;
									max-height: 90px;
								}
							}
						}
					}
				}
			}
		}
	}
</style>